<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改内容</title>
</head>
<body>
<div id="container" >
    <input type="text" value="123" id="text">
    <textarea id="textarea">456</textarea>
    <select id="select">
        <option value="one" id="one">1</option>
        <option value="two">2</option>
        <option value="three">3</option>
        <option value="four">4</option>
    </select>
    <span id="other">杂项</span>
</div>
<button type="button" onclick="changeContent()">点击我，进行修改内容</button>
<script type="text/javascript">
    function changeContent(){
        //修改内容
        // 1、 先获取元素
        // 2、 修改内容

        /*修改 input框中的内容*/
        let text = document.querySelector("#text");
        // 获取值
        //console.log(text);
        //console.log(text.value);
        //修改内容
        text.value = "好烦呀,这个鬼东西";
        //console.log(text.value);


        /*修改 textarea框中的内容*/
        let textarea = document.querySelector("#textarea");
        //console.log(textarea);
        //console.log("innerHTML"+textarea.innerHTML);//456
        //console.log("text"+textarea.text);//undefined
        //console.log("value"+textarea.value);//456

        let s = "haha";
        textarea.innerHTML=s;
        //console.log(textarea.innerHTML);

        /*修改 option框中的内容*/
        let option = document.querySelector("#one");
        console.table(option );
        // innerHTML 和 innerText 都是 在页面上能直接看到的内容
        // value 是 发送到 服务器，可以获取的内容。
        option.value="first";
        option.innerText="修改内容";

        /*修改 span中的内容*/
        let span = document.querySelector("#other");
        span.innerText=s;

    }
</script>
</body>
</html>